<template>
    <div class="mine_body">
        <div class="my">
            <div>
                <span>想更改账户？</span>
                <span>退出</span>
            </div>
            <div>
                <el-button  link :icon="Setting"  />
            </div>
        </div>
        <div class="rotList">
            <div @click="router.push(item.link)" v-for="item in rotList" :key="item.id" >
                <div>
                    <el-image style="width:31px"
                        :src="item.url" />
                </div>
                <div>{{item.name}}</div>
                <div>
                    <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
        </div>
        <div class="list">
            <div v-for="item in list" :key="item.id" @click="router.push(item.link)" >
                <div>
                    {{item.name}}
                </div>
                <div>
                    <el-icon>
                        <ArrowRightBold />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Setting, ArrowRightBold } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const rotList = [
    {
        id:'/page/mine/orider',
        url:"https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/book.png",
        name:"我的订单",
        link:'/page/mine/orider'
    },
    {
        id:'/page/mine/integral',
        url:"https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/ticket.png",
        name:"积分",
        link:'/page/mine/integral'
    },
    {
        id:'/page/mine/collection',
        url:"https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/heart.png",
        name:"我的收藏",
        link:'/page/mine/collection'
    },
    {
        id:'/page/mine/address',
        url:"https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/locate.png",
        name:"收货地址",
        link:'/page/mine/address'
    },
    {
        id:'/page/mine/history',
        url:"https://www.showjane.com/template/pc/rainbow/static/xiujiang/images/order.png",
        name:"我的足迹",
        link:'/page/mine/history'
    }
]
const list = [
    {
        id:1,
        name:"品牌",
        link:'#'
    },
    {
        id:2,
        name:"设计师",
        link:'#'
    },
    {
        id:3,
        name:"开店灵感",
        link:'#'
    },
    {
        id:4,
        name:"安全密码",
        link:'#'
    },
    {
        id:5,
        name:"我要反馈",
        link:'#'
    },
    {
        id:6,
        name:"联系客服",
        link:'/page/mine/us'
    },
]


</script>

<style scoped lang="scss">
.mine_body {
    width: 1300px;
    margin: 0 auto;
    & .my{
        display: flex;
        justify-content: end;
        align-items: center;
        & >div{
            margin-left: 20px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        &  :deep(.el-button){
            font-size: 20px;
        }
    }
    & .rotList {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        &>div {
            cursor: pointer;
            width: 220px;
            height: 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #999999;
            border-radius: 10px;
            padding-left: 24px;
            padding-right: 56px;
            margin-bottom: 28px;

            &>:nth-child(2) {
                font-size: 20px;
            }

            &>:nth-child(2):hover {
                color: #54BAC9;
            }

            &>:nth-child(3) {
                font-size: 14px;
            }
        }
    }
    & .list{
        margin-bottom: 60px;
        &>div{
            cursor: pointer;
            height: 95px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #F2F2F2;
            &>:nth-child(1){
                text-indent: 16px;
                font-size: 16px;
            }
            &>:nth-child(2){
                font-size: 22px;
                color: #999999;
            }
        }
        &>div:hover{
            color: #54BAC9;
        }
    }
}
</style>